<template>
	<view style="background-color: #fff;">
		<view class="vip-header">
			<view v-for="(item,index) in dataList" :key="index" class="vip-header-item"
				:class="{'vip-header-item-active':headerActive==(index+1)?true:false}" @click="headerSwitch(index+1)">
				{{item.name}}
			</view>
		</view>
		<view class="vip-content">
			<view class="vip-content-tupian">
				<image class="vip-content-tupian-bg" :src="vipContent.cover_url" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="vip-content-title">
			<image class="vip-content-title-img" src="../../../../static/vip/rectangle-right.png" mode=""></image>
			<text class="vip-content-title-text">会员特权</text>
			<image class="vip-content-title-img" src="../../../../static/vip/rectangle-left.png" mode=""></image>
		</view>
		<view class="vip-list" v-if="vipContent.benefits">
			<view class="vip-list-item" v-for="(bf,i) in vipContent.benefits" :key="i">
				<image class="vip-list-item-img" :src="bf.icon_url" mode="scaleToFill"></image>
				<view class="vip-list-item-content">
					<view class="vip-list-item-title">
						{{bf.name}}
					</view>
					<view class="vip-list-item-note">
						{{bf.describe}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 85px;">
		</view>
		<view class="vip-fixed">
			<button class="vip-fixed-btn" style=" backgroundColor:#F7F8FA;borderColor:#1AAD19" type="default"
				@click="handler('zx')">咨询</button>
			<button class="vip-fixed-btn vip-fixed-btn-two" type="primary" @click="handler('kt')"
				style="background-color: #007aff;">开通会员</button>
		</view>
	</view>
</template>

<script>
	import {
		getMemberList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				headerActive: 1,
				dataList: [],
				vipContent: []
			}
		},
		methods: {
			headerSwitch: function(num) {
				this.headerActive = num
				this.vipContent = this.dataList[num - 1]
			},
			handler: function(type) {
				switch (type) {
					case 'zx':
						uni.navigateToMiniProgram({
							appId: 'wxb730ea87f4e4f8f3',
							path: '/page/index/index',
							extraData: {},
							envVersion:"trial",
							success(res) {
								// 打开成功
							},
							fail() {
								uni.showToast({
									title: "打开客服失败"
								})
							}
						})
						break;
					case 'kt':
						uni.showToast({
							title: "此功能暂未开放"
						})
						break;
				}
			}
		},
		onShow() {
			this.headerActive = 1
			uni.setNavigationBarTitle({
				title: "会员中心"
			})
		},
		mounted() {
			getMemberList().then(res => {
				console.log("会员===", res);
				this.dataList = res.data
				this.vipContent = this.dataList[0]
			})
		}
	}
</script>

<style scoped lang="scss">
	.vip-header {
		display: flex;
		justify-content: center;
		background-color: #2F58C6;
		align-items: center;

		&-item {
			font-size: 15px;
			color: #ccc;
			margin: 15px 10px;

			&-active {
				color: #fff;
				font-size: 18px;
			}
		}
	}

	.vip-content {
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		&-tupian {
			width: 100%;
			text-align: center;

			&-bg {
				height: 158px;
				width: 100%;
			}

			&-vip {
				height: 41px;
				width: 120px;
				position: absolute;
				bottom: 25px;
				left: 30px;
			}

			&-cst {
				position: absolute;
				left: 10px;
				top: 35px;
				background-color: #99B4D6;
				padding: 8px 18px;
				border-radius: 0 14px 14px 0;
				color: #fff;
				font-size: 15px;
				font-weight: bold;
				letter-spacing: 2px;
			}

			&-bz {
				position: absolute;
				right: 40px;
				bottom: 28px;
				color: #fff;
				font-size: 20px;
				font-weight: bold;
				letter-spacing: 2px;
			}

		}

		&-title {
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #CCCCCC;
			border-bottom: 1px solid #CCCCCC;
			padding: 15px;
			margin: 0 14px;

			&-img {
				height: 7px;
				width: 50px;
			}

			&-text {
				margin: 0 10px;
			}
		}
	}

	.vip-list {
		padding: 10px 10px;

		&-item {
			display: flex;
			margin: 10px 0;

			&-img {
				width: 40px;
				height: 40px;
				background: linear-gradient(0deg, #707181 0%, #D1D1DB 100%);
				border-radius: 50%;
				padding: 6px;
			}

			&-title {
				font-size: 14px;
				font-weight: bold;
				margin-left: 10px;
			}

			&-note {
				font-size: 12px;
				color: #333333;
				margin-left: 10px;
			}

			&-last {
				margin-bottom: 100px;
			}
		}
	}

	.vip-fixed {
		padding: 20px 10px;
		position: fixed;
		height: 80px;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		display: flex;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(230, 230, 230, 0.75);

		&-btn {
			border-radius: 20px;
			min-width: 80px;
			height: 45px;
			border: none;

			&-two {
				width: 241px;
			}
		}
	}
</style>